<template>
  <div class="container">
    <ul class="doc-list">
      <li class="list-item clearfix"
          v-for="(item, index) in doc_list"
          :key="index"
          @click="to_detail(item)">
        <!-- 医生信息 -->
        <div class="left">
          <!-- 头像 -->
          <div class="doc-logo">
            <img :src="img_url+item.image"
                 v-if="img_url&&item.image"
                 alt
                 mode="widthFix"
                 class="img" />
          </div>
          <!-- 认证 -->
          <div class="tip"
               v-if="item.is_v==1">
            <img :src="base_url+'/mp_2.4/yishengbiaoshi-xiao/VIP@2x.png'"
                 v-if="base_url"
                 class="img" />
          </div>
        </div>
        <div class="info">
          <!-- 医生信息 -->
          <div class="doc-info">
            <span class="doc-name">{{item.name}}</span>
            <span class="doc-leval"
                  v-if="item.position">{{item.position}}</span>
          </div>
          <div class="case">
            <span class="booking">预约:{{item.reservationNumber}}</span>
            <span class="line"></span>
            <span class="casenum">案例:{{item.caseNumber}}</span>
          </div>
          <!-- 标签 -->
          <div class="tags clearfix">
            <div class="tag-item"
                 :class="{'status-1':tag.color==1,'.status-2':tag.color==2}"
                 v-for="(tag, i) in item.tagList"
                 :key="i">
              <div class="icon"></div>
              <div class="msg">{{tag.name}}</div>
            </div>
          </div>

          <div class="hos-name"
               v-html="item.hospitalName?item.hospitalName:item.hospitals_name"></div>
          <!-- 专长 -->
          <div class="speciality clearfix"
               v-if="item.labelList&&item.labelList.length>0">
            <div class="speciality-item"
                 v-for="(val, key) in item.labelList"
                 :key="key">
              <span v-html="val.name?val.name:val"></span>
              <!-- {{val}} -->
            </div>
          </div>
          <div class="score">
            <div class="item">
              <img :src="item.star>=1?'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png':'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_n@2x.png'"
                   alt
                   class="star" />
              <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_half@2x.png"
                   v-if="item.star==1.5"
                   class="star" />
              <img :src="item.star>=2?'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png':'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_n@2x.png'"
                   alt
                   class="star" />
              <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_half@2x.png"
                   v-if="item.star==2.5"
                   class="star" />
              <img :src="item.star>=3?'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png':'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_n@2x.png'"
                   alt
                   class="star" />
              <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_half@2x.png"
                   v-if="item.star==3.5"
                   class="star" />
              <img :src="item.star>=4?'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png':'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_n@2x.png'"
                   alt
                   class="star" />
              <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_half@2x.png"
                   v-if="item.star==4.5"
                   class="star" />
              <img :src="item.star>=5?'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_s@2x.png':'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/details_ic_star_n@2x.png'"
                   alt
                   class="star" />
            </div>
            <span class="num1">{{item.star}}分</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      score: 4
    };
  },
  components: {},
  props: ["doc_list"],
  methods: {
    to_detail (item) {
      wx.navigateTo({
        url: "/pages/package_projects/doctordetail/main?id=" + item.id
      });
    }
  },
  created () { }
};
</script>

<style lang="less" scoped>
.container {
  .doc-list {
    padding: 0 10px;
    .list-item {
      display: flex;
      padding: 12px 10px;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
      border-radius: 5px;
      margin-bottom: 10px;
      position: relative;
      .left {
        width: 50px;
        height: 50px;
        position: relative;
        .doc-logo {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          position: relative;
          overflow: hidden;
          .img {
            width: 100%;
            display: block;
          }
        }
        .tip {
          width: 13px;
          height: 13px;
          position: absolute;
          bottom: 1px;
          right: 3px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info {
        flex: 1;
        padding-left: 10px;
        position: relative;
        .doc-info {
          .doc-name {
            font-size: 16px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 22px;
            vertical-align: middle;
            margin-right: 5px;
          }
          .doc-leval {
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
            vertical-align: middle;
          }
        }
        .case {
          color: #999;
          font-size: 12px;
          display: flex;
          align-items: center;
          .booking {
            width: auto;
            height: 17px;
            display: block;
            margin-right: 10px;
            position: relative;
          }
          .line {
            display: block;
            width: 3px;
            height: 10px;
            background: linear-gradient(
              180deg,
              rgba(238, 238, 238, 0) 0%,
              rgba(228, 228, 228, 1) 46%,
              rgba(216, 216, 216, 0) 100%
            );
            border-radius: 2px;
          }
          .casenum {
            width: auto;
            height: 17px;
            display: block;
            margin-left: 10px;
          }
        }
        .hos-name {
          margin-top: 5px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
        }
        .tags {
          margin-top: 6px;
          padding-left: 10px;
          width: 100%;
          .tag-item {
            float: left;
            margin-right: 15px;
            position: relative;
            margin-bottom: 5px;
            .icon {
              width: 21px;
              height: 21px;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 10;
            }
            .msg {
              padding-left: 12px;
              padding-right: 6px;
              height: 16px;
              border-radius: 0px 8px 8px 0px;
              font-size: 11px;
              font-family: "PingFangSC-Semibold";
              font-weight: 600;
              color: rgba(255, 255, 255, 1);
              line-height: 16px;
              background-repeat: no-repeat;
              background-position: right center;
              background-size: 100% 100%;
              letter-spacing: 1px;
            }
          }
          // 紫色
          .status-2 {
            .icon {
              background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/Group2Copy@2x.png");
            }
            .msg {
              background: rgba(122, 172, 255, 1);
              box-shadow: 0px 1px 1px 0px rgba(110, 169, 252, 0.78);
            }
          }
          // 蓝色
          .status-1 {
            .icon {
              background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/@2xGroup2Copy.png");
            }
            .msg {
              background: rgba(155, 155, 255, 1);
              box-shadow: 0px 1px 1px 0px rgba(202, 202, 255, 1);
            }
          }
        }
        .speciality {
          .speciality-item {
            height: 21px;
            padding: 0 10px;
            background: rgba(237, 239, 242, 1);
            border-radius: 11px;
            font-size: 12px;
            font-family: "PingFangSC-Light";
            font-weight: 300;
            color: rgba(51, 51, 51, 1);
            line-height: 21px;
            text-align: center;
            margin-top: 10px;
            margin-right: 5px;
            float: left;
          }
        }
        .score {
          width: auto;
          display: block;
          position: absolute;
          top: 5px;
          right: 0px;
          .item {
            height: 20px;
            overflow: hidden;
            display: inline-block;
            .star {
              width: 12px;
              height: 12px;
              float: left;
              margin-right: 4px;
            }
          }
          .num1 {
            font-size: 10px;
            color: rgba(255, 147, 69, 1);
            margin-left: 6px;
            vertical-align: top;
            line-height: 14px;
          }
        }
      }
    }
  }
}
</style>


